<template>
    <div class="phone">
        <Card :title="timeTitle" class="record-wrapper" icon="ios-options" :padding="0" shadow>
            <DatePicker type="date"
                        :value="day"
                        @on-change='handleChange'
                        placeholder="Select date"
                        style="width: 200px"
                        slot="extra"
                        class="data-select">
            </DatePicker>
            <div class="select-time-wrapper">
                <Select v-model="teachingId"
                        style="width:70%"
                        @on-change="search"
                        placeholder="选择上课时间"
                        class="select-time"
                >
                    <Option v-for="item in teachingList"
                            :value="item.id"
                            :key="item.id">
                        {{item.room}} {{item.teacher}} {{item.grade}} {{item.type}}
                    </Option>
                </Select>
            </div>
            <CellGroup>
                <Cell :title="record.student" class="item" v-for="(record,index) in recordList" :key="index">
                    <template v-if="record.status==1">
                        <Icon type="md-checkmark" style="color: green" slot="icon"/>
                        <span slot="extra" class="reset" @click="reset(record)">重置</span>
                    </template>
                    <template v-else-if="record.status==2">
                        <Icon type="md-close" style="color: red" slot="icon"/>
                        <span slot="label">{{record.remark}}</span>
                        <span slot="extra" class="reset" @click="reset(record)">重置</span>
                    </template>
                    <template v-else>
                        <span slot="extra" class="record" @click="present(record)">打卡</span>
                        <span slot="extra" class="absent" @click="absent(record)">缺勤</span>
                    </template>
                </Cell>
                <cell :title="remark==''?'课程备注':remark" class="item">
                    <span slot="extra" class="" v-if="remark==''" @click="updateTeachingRemark">备注</span>
                    <span slot="extra" class="reset" v-else @click="resentRemark">重置</span>
                </cell>
            </CellGroup>
        </Card>
        <Drawer title="时间段" placement="left" :closable="false" v-model="timeShow">
            <CellGroup>
                <Cell v-for="(time,index) in timeList"
                      :key="index"
                >
                    <div @click="timeSelect(time)">
                        <span>{{time}}</span>
                    </div>
                </Cell>
            </CellGroup>
        </Drawer>
        <div class="record-left" @click="option">
        </div>
    </div>
</template>

<script>
    import {
        clockRecord,
        deleteTeachingRemark,
        getRecord,
        getTeachingRemark,
        reset,
        saveTeachingRemark,
        teachingListByTime,
    } from "../request/api"
    import {today} from "../request/utils"

    export default {
        name: "App",
        data() {
            return {
                day: today,
                timeShow: false,
                timeTitle: '时间段',
                courseId: '',
                teachingId: '',
                teachingList: [],
                recordList: [],
                timeList: [],
                remark: '',
                remarkId: null,
                courseList: [
                    {
                        id: 1,
                        name: '物理课',
                        teacher: '牛妈妈',
                        room: '10',
                        grade: '高一',
                        type: '精品班'
                    }, {
                        id: 2,
                        name: '物理课',
                        teacher: '王妈妈',
                        room: '10',
                        grade: '高一',
                        type: '精品班'
                    }
                ]
            }
        },
        created() {
            this.getTimeList();
        },
        methods: {
            option() {
                this.timeShow = true;
            },
            present(row) {
                let studentRecord = Object.assign({}, row);
                studentRecord.status = 1;
                this.clockRecord(studentRecord);
            },
            absent(row) {
                this.$Modal.confirm({
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.value,
                                autofocus: true,
                                placeholder: '缺勤说明'
                            },
                            on: {
                                input: (val) => {
                                    this.value = val;
                                },
                            },
                        })
                    },
                    onOk: () => {
                        let studentRecord = Object.assign({}, row);
                        studentRecord.status = 2;
                        studentRecord.remark = this.value;
                        this.clockRecord(studentRecord);
                        this.value = "";
                    }
                })
            },
            getTeachingList() {
                // teachingSearch({
                //     courseId: this.courseId,
                //     day: this.day
                // }).then((res) => {
                //     this.teachingList = res.data;
                //     if (res.data.length > 0) {
                //         this.teachingId = res.data[0].id;
                //         this.getRecord();
                //     } else {
                //         this.teachingList = [];
                //         this.teachingId = "";
                //     }
                // })
            },
            getRecord() {
                getRecord({
                    day: this.day,
                    teachingId: this.teachingId
                }).then(res => {
                    this.recordList = res.data;
                    //获取备注
                    this.teachingRemark();
                });
            },
            search() {
                if (this.teachingId != undefined && this.teachingId != "") {
                    this.getRecord();
                }

            },

            clockRecord(record) {
                clockRecord(record).then((res) => {
                    if (res.code == 200) {
                        this.getRecord();
                    }
                })
            },
            reset(row) {
                reset(row.id).then(() => {
                    this.getRecord();
                })
            },
            //time
            getTimeList() {
                // timeList(this.day).then((res) => {
                //     if (res.code == 200) {
                //         this.timeList = res.data;
                //         if (this.timeList && this.timeList.length > 0) {
                //             let currentMinutes = (new Date().getHours()) * 60 + new Date().getMinutes();
                //             for (let i = 0; i < this.timeList.length; i++) {
                //                 let arr = this.timeList[i].split("-")
                //                 let startMinutes = (arr[0].split(":")[0] * 60) + arr[0].split(":")[1] * 1
                //                 let endMinutes = (arr[1].split(":")[0] * 60) + arr[1].split(":")[1] * 1
                //                 if (currentMinutes > startMinutes && currentMinutes < endMinutes) {
                //                     this.timeTitle = this.timeList[i];
                //                     break;
                //                 } else {
                //                     this.timeTitle = this.timeList[0];
                //                 }
                //             }
                //             this.getTeachingListByTime();
                //         } else {
                //             this.timeTitle = "时间段";
                //             this.teachingId = "";
                //             this.teachingList = [];
                //             this.recordList = [];
                //         }
                //     }
                // })
            },
            getTeachingListByTime() {
                teachingListByTime({
                    day: this.day,
                    time: this.timeTitle
                }).then((res) => {
                    if (res.code == 200) {
                        this.teachingList = res.data;
                        if (null != res.data && res.data.length > 0) {
                            this.teachingId = res.data[0].id;
                            this.getRecord();
                        } else {
                            this.teachingList = [];
                            this.recordList = [];
                        }
                    }
                })
            },
            timeSelect(time) {
                this.timeTitle = time;
                this.timeShow = false;
                this.getTeachingListByTime();
            },
            handleChange(day) {
                this.day = day;
                this.getTimeList();
            },
            teachingRemark() {
                getTeachingRemark({
                    day: this.day,
                    teachingId: this.teachingId
                }).then((res) => {
                    if (res.code == 200) {
                        console.log(res.data);
                        if (null != res.data) {
                            this.remark = res.data.remark;
                            this.remarkId = res.data.id;
                            return;
                        }
                    }
                    this.remark = '';
                    this.remarkId = null;
                })
            },
            //课程备注
            updateTeachingRemark() {
                this.$Modal.confirm({
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.remark,
                                autofocus: true,
                                placeholder: '课程备注'
                            },
                            on: {
                                input: (val) => {
                                    this.remark = val;
                                },
                            },
                        })
                    },
                    onOk: () => {
                        this.saveTeachingRemark();
                    }
                })
            },
            saveTeachingRemark() {
                saveTeachingRemark({
                    id: this.remarkId,
                    teachingId: this.teachingId,
                    remark: this.remark,
                    day: this.day
                }).then(() => {
                    this.teachingRemark();
                })
            },
            //重置备注
            resentRemark() {
                deleteTeachingRemark(this.remarkId).then(() => {
                    this.teachingRemark();
                })
            }
        }
    }
</script>

<style scoped>
    .record-wrapper {
        position: relative;
    }

    .ivu-cell-title {
        font-size: 16px;
    }

    .record-left {
        position: absolute;
        width: 130px;
        height: 50px;
        top: 0;
        left: 0;
        z-index: 12;
    }

    .record {
        color: green;
        margin-right: 10px;
    }

    .absent {
        color: red;
    }

    .reset {
        color: blue;
    }

    .select-time-wrapper {
    }

    .data-select {
        margin-top: -10px;
    }

    .select-time {
        float: right;
        margin: 10px 10px 5px 0;
    }

    .item {
        border-bottom: 1px solid #bfbfbf;
    }
</style>
